<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #f8f8f8;
        }
        .main ul li:nth-child(2) .li_box {
        	height: 65px;
        	line-height: 65px;
        }
        .main ul li:last-child .li_box {
        	border-bottom: none;
        }
        .li_box {
        	height: 50px;
        	line-height: 50px;
			display: -webkit-box;
			display: -webkit-flex;
			padding: 0 15px;
			background-color: #fff;
			border-bottom: 1px solid #e8e8e8;
        }
        .li_box .li_boxl {
        	color: #333;
            font-size: 15px;
        }
        .li_box .li_boxr {
        	width: 0;
            flex: 1;
            -webkit-flex: 1;
            box-flex: 1;
            -webkit-box-flex: 1;
            font-size: 12px;
            color: #999;
            display: -webkit-box;
            -webkit-box-align: center;
            -webkit-box-pack: end;
        }
        .li_box .li_boxr span {
        	display: block;
        }
        .li_box .li_boxr .right {
        	height: 13px;
        	display: block;
        	padding-left: 10px;
        }
        .li_box .li_boxr .img_icon {
        	height: 35px;
        	display: block;
            margin-left: 5px;
        }
        #goods_img {
            width: 35px;
            height: 35px;
        }
        .span_div {
        	width: 43px;
        	height: 24px;
        	line-height: 24px;
        	text-align: center;
        	color: #999;
        	font-size: 12px;
        	background-color: #f9f9f9;
        	border-radius: 5px;
        	border: 1px solid #dcdcdc;
        	box-sizing: border-box;
        	margin-left: 10px;
        }
        .span_div.active {
        	background-color: #ffa525;
        	color: #fff;
        }
        .span_div input {
        	display: none;
        }
        .span_s {
            width: 0;
            flex: 1;
            -webkit-flex: 1;
            box-flex: 1;
            -webkit-box-flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="main">
    	<ul>
    		<li onclick="fnChoseCats();" tapmode>
    			<div class="li_box">
    				<div class="li_boxl">商品分类</div>
    				<div class="li_boxr">
    					<span id="shop_cid">请选择</span>
    					<img class="right" src="../image/right.png">
    				</div>
    			</div>
    		</li>
    		<li>
    			<div class="li_box" onclick="fnUploadImg();" tapmode>
    				<div class="li_boxl">图片</div>
    				<div class="li_boxr">
    					<img id="goods_img"  class="img_icon" src="../image/add_id_card.png">
    				</div>
    			</div>
    		</li>
    		<li onclick="fnCommonEdit('goods_name','名称','商品名称');"  tapmode>
    			<div class="li_box">
    				<div class="li_boxl">名称</div>
    				<div class="li_boxr">
    					<span id="goods_name">请选择</span>
    					<img class="right" src="../image/right.png">
    				</div>
    			</div>
    		</li>
    		<li onclick="fnCommonEditTextarea('desc','介绍','商品介绍');"  tapmode>
    			<div class="li_box">
    				<div class="li_boxl">介绍</div>
    				<div class="li_boxr">
    					<span id="desc" class="span_s">请选择</span>
    					<img class="right" src="../image/right.png">
    				</div>
    			</div>
    		</li>
            <li onclick="fnCommonEdit('real_price','单价','商品单价','number');"  tapmode>
                <div class="li_box">
                    <div class="li_boxl">单价</div>
                    <div class="li_boxr">
                        <span id="real_price">请选择</span>
                        <img class="right" src="../image/right.png">
                    </div>
                </div>
            </li>
    		<li onclick="fnCommonEdit('prefer_price','优惠价','商品优惠价','number');"  tapmode>
    			<div class="li_box">
    				<div class="li_boxl">优惠价</div>
    				<div class="li_boxr">
    					<span id="prefer_price">请选择</span>
    					<img class="right" src="../image/right.png">
    				</div>
    			</div>
    		</li>
    		<li>
    			<div class="li_box">
    				<div class="li_boxl">当前价格</div>
    				<div class="li_boxr">
    					<div id="use_prefer0" class="span_div active" tapmode onclick="fnRadio(this,'use_prefer',0);"><input type="radio" name="price" checked="true">单价</div>
    					<div id="use_prefer1" class="span_div" tapmode onclick="fnRadio(this,'use_prefer',1);"><input type="radio" name="price">优惠价</div>
    				</div>
    			</div>
    		</li>
    		<li onclick="fnCommonEdit('weight','重量','单位G','number');"  tapmode>
    			<div class="li_box">
    				<div class="li_boxl">重量</div>
    				<div class="li_boxr">
    					<span id="weight">请选择</span>
    					<img class="right" src="../image/right.png">
    				</div>
    			</div>
    		</li>
    		<li onclick="fnCommonEdit('canteen_price','餐具费','餐具费','number');"  tapmode>
    			<div class="li_box">
    				<div class="li_boxl">餐具费</div>
    				<div class="li_boxr">
    					<span id="canteen_price">请选择</span>
    					<img class="right" src="../image/right.png">
    				</div>
    			</div>
    		</li>
    		<li onclick="fnCommonEdit('stock','库存','请填入库存','number');"  tapmode>
    			<div class="li_box">
    				<div class="li_boxl">库存</div>
    				<div class="li_boxr">
    					<span id="stock">请选择</span>
    					<img class="right" src="../image/right.png">
    				</div>
    			</div>
    		</li>
    		<li>
    			<div class="li_box">
    				<div class="li_boxl">当前商品状态</div>
    				<div class="li_boxr">
    					<div id="goods_status1" class="span_div active" tapmode onclick="fnRadio(this,'goods_status',1);"><input type="radio" name="state" checked="true">上架</div>
    					<div id="goods_status0" class="span_div" tapmode onclick="fnRadio(this,'goods_status',0);"><input type="radio" name="state">下架</div>
    				</div>
    			</div>
    		</li>
    		<li class="branch_shop" onclick="fnShareBranceShop();" tapmode>
    			<div class="li_box">
    				<div class="li_boxl">同步至分店</div>
    				<div class="li_boxr">
    					<span id="branch_ids">请选择</span>
    					<img class="right" src="../image/right.png">
    				</div>
    			</div>
    		</li>
    	</ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    apiready = function(){
        goods_id = api.pageParam.goods_id || '';
        shop = $api.getStorage('shop_data');
        obj = {};
        obj['use_prefer'] = 0;
        obj['goods_status'] = 1;
        if(goods_id) {
            fnGetGoodsdetail();
            $('.branch_shop').hide();
        }
        api.addEventListener({
            name: 'addGoodsEvent'
        }, function(ret, err) {
            if (ret) {
                var edit_label = ret.value.edit;
                var edit_value = ret.value.value;
                var edit_desc = ret.value.desc;
                obj[edit_label] = edit_value;
                if(edit_desc.length > 5) {
                    $('#'+edit_label).text(edit_desc.substring(0,6)+'...');
                }else {
                    $('#'+edit_label).text(edit_desc);
                }
            }
        });

        //选择分店
        api.addEventListener({
            name: 'subShopIdsEvent'
        }, function(ret, err) {
            if (ret) {
                branch_ids = ret.value.branch_ids;
                if(branch_ids.length > 0) {
                    $('#branch_ids').text('同步到'+branch_ids.length+'间分店');
                    obj['branch_ids'] = branch_ids.join(',');
                }
            }
        });
        api.addEventListener({
            name: 'submitGoodsEvent'
        }, function(ret, err) {
            if (ret) {
                //判断一轮
                if(!obj.shop_cid) {
                    api.toast({
                        msg: '请选择商品所属分类',
                        location:'middle'
                    });
                    return;
                }
                if(!obj.goods_img) {
                    api.toast({
                        msg: '请选择商品图片',
                        location:'middle'
                    });
                    return;
                }
                if(!obj.goods_name) {
                    api.toast({
                        msg: '请填入商品名称',
                        location:'middle'
                    });
                    return;
                }
                if(!obj.desc) {
                    api.toast({
                        msg: '请填入商品介绍',
                        location:'middle'
                    });
                    return;
                }
                if(!obj.real_price) {
                    api.toast({
                        msg: '请填入商品价格',
                        location:'middle'
                    });
                    return;
                }
                if(!obj.prefer_price) {
                    api.toast({
                        msg: '请填入商品优惠价格',
                        location:'middle'
                    });
                    return;
                }
                if(!obj.canteen_price) {
                    api.toast({
                        msg: '请填入餐具费用',
                        location:'middle'
                    });
                    return;
                }
                if(!obj.weight) {
                    api.toast({
                        msg: '请填入商品重量',
                        location:'middle'
                    });
                    return;
                }
                if(!obj.stock) {
                    api.toast({
                        msg: '请填入商品库存',
                        location:'middle'
                    });
                    return;
                }
                openLoading();
                api.ajax({
                    url: rootPath+'/api/seller/edit_goods',
                    method: 'post',
                    data: {
                        values: { 
                            goodsObj: JSON.stringify(obj),
                            shop_id : shop.id,
                            token:shop.token,
                            goods_id : goods_id
                        },

                    }
                }, function(ret, err) {
                    if (ret) {
                        api.sendEvent({
                            name: 'goodsChangeEvent',
                            extra: {
                            }
                        });
                        api.toast({
                            msg: '添加成功',
                            location:'middle'
                        });
                        setTimeout(function(){
                            api.closeWin();
                        },1000)
                    } else {
                        // alert(JSON.stringify(err.msg));
                    }
                    closeLoading();
                });
            }
        });
    };

    function fnGetGoodsdetail() {
        api.ajax({
            url: rootPath+'/api/goods/goods_detail',
            method: 'get',
            data: {
                values: { 
                    id: goods_id
                },

            }
        }, function(ret, err) {
            if (ret) {
                // alert(JSON.stringify(ret))
                if(ret.status == 200) {
                    obj.shop_cid = ret.data.shop_cid;
                    $('#shop_cid').text(ret.data.shop_cat_name);
                    $('#goods_img').attr('src',formatHeadImg(ret.data.goods_img));
                    obj['goods_img'] = ret.data.goods_img;
                    $('#goods_name').text(ret.data.goods_name);
                    obj['goods_name'] = ret.data.goods_name;
                    $('#desc').text(formatText(ret.data.desc));
                    obj['desc'] = ret.data.desc;
                    $('#real_price').text(ret.data.real_price);
                    obj['real_price'] = ret.data.real_price;
                    $('#prefer_price').text(ret.data.prefer_price);
                    obj['prefer_price'] = ret.data.prefer_price;
                    fnRadio('#use_prefer'+ret.data.use_prefer,'use_prefer',ret.data.use_prefer);
                    obj['use_prefer'] = ret.data.use_prefer;
                    $('#weight').text(ret.data.weight);
                    obj['weight'] = ret.data.weight;
                    $('#canteen_price').text(ret.data.canteen_price);
                    obj['canteen_price'] = ret.data.canteen_price;
                    $('#stock').text(ret.data.stock);
                    obj['stock'] = ret.data.stock;
                    fnRadio('#goods_status'+ret.data.goods_status,'goods_status',ret.data.goods_status);
                    obj['goods_status'] = ret.data.goods_status;
                }
            } else {
                // alert(JSON.stringify(err.msg));
            }
        });
    }

    function formatText(edit_desc) {
        if(edit_desc.length > 5) {
            return edit_desc.substring(0,6)+'...';
        }else {
            return edit_desc;
        }
    }

    function fnRadio(this_,field,value) {
    	$(this_).children('input').prop('checked', true);
    	if ($(this_).children('input').prop('checked')) {
    		$(this_).siblings('.span_div').removeClass('active');
    		$(this_).addClass('active');
    	}
        obj[field] = value;
    }

    function fnChoseCats() {
        api.openWin({
            name: 'seller_cats',
            url: './seller_cats.html',
        });
    }

    function fnUploadImg() {
        var UIMultiSelector = api.require('UIMultiSelector');
        UIMultiSelector.open({
             rect: {
                 h: 210
             },
             text: {
                 title: '上传商品图片',
                 leftBtn: '',
                 rightBtn: '取消',
             },
             max: 0,
             singleSelection: true,
             styles : {
                mask: 'rgba(0,0,0,0.3)',
                title: {
                    bg: '#eef2f3',
                    color:'#000',
                    size: 16,
                    h: 50
                },
                leftButton: {
                    bg: 'rgba(0,0,0,0)',
                    w: 80,
                    h: 0,
                    marginT: 5,
                    marginR: 8,
                    color: '#fff',
                    size: 14
                },
                rightButton: {
                    bg: 'rgba(0,0,0,0)',
                    w: 80,
                    h: 35,
                    marginT: 5,
                    marginR: 8,
                    color: '#1dbcd1',
                    size: 14
                },
                item : {
                    h : 80,
                    textAlign : 'center',
                    size:16
                },
                icon: {
                    w:0,
                    h:0,
                    marginT: 0,
                    marginH: 0,
                    bg: '#fff',
                    align: 'left'
                }
             },
             animation: true,
             items: [{
                text : "从手机相册选择",
                status : "normal"
             },{
                text : "拍照",
                status : "normal"
             }]
        }, function(ret, err) {
             if (ret) {
                 if(ret.eventType == 'clickRight') {
                    UIMultiSelector.close();
                 }
                 if(ret.eventType == 'clickItem') {
                    var select_text = ret['items'][0]['text'];
                   if(select_text == '拍照') {
                        fnChoosePic(0);
                   }else {
                        fnChoosePic(1);
                   }
                    UIMultiSelector.close();
                 }
             } else {
                 showError(err.code,err.msg);
             }
        });
    }

    function fnChoosePic (type_) {
        openLoading();
        if(type_)
        {
            // sourceType = 'album';
            sourceType = 'library';
        }
        else
        {
            sourceType = 'camera'; 
        }
        api.getPicture({
            sourceType: sourceType,
            encodingType: 'jpg',
            mediaValue: 'pic',
            destinationType: 'url',
            allowEdit: true,
            quality: 99,
            targetWidth: 500,
            // targetHeight: 100,
            saveToPhotoAlbum: false
        }, function( ret, err ){ 
            if(ret){
                ajaxUploadPic(ret.data);
            }else{
                // showError(err.code,err.msg);
                closeLoading();
            }
        });
    };

    function ajaxUploadPic (data_) {
        api.ajax({
            url: rootPath+'/api/seller/update_photo',
            method: 'post',
            data: {
                values: { 
                    shop_id: shop.id,
                    token: shop.token,
                },
                files: { 
                    photo: data_
                }
            }
        },function(ret, err){
            if(ret.status == 200)
            {
                var head_img = formatHeadImg(ret.path);
                $('#goods_img').attr('src',head_img);
                obj['goods_img'] = ret.path;
            }
            closeLoading();
        });
    };

    function fnCommonEdit(field,name,holder,type) {
        var type = type?type:'text';
        var value = goods_id?obj[field]:'';
        api.openWin({
            name: 'edit_goods',
            url: './edit_goods.html',
            pageParam: {
                field: field,
                name : name,
                holder : holder,
                type: type,
                value:value
            }
        });
    }

    function fnCommonEditTextarea(field,name,holder) {
        var value = goods_id?obj[field]:'';
        api.openWin({
            name: 'edit_goods_textarea',
            url: './edit_goods_textarea.html',
            pageParam: {
                field: field,
                name : name,
                holder : holder,
                value : value
            }
        });
    }

    function fnShareBranceShop() {
        api.openWin({
            name: 'select_branch',
            url: './select_branch.html',
        });
    }
</script>
</html>